<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>layui文件上传示例</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div class="layui-form layuimini-form">
    <div class="layui-form-item">
        <label class="layui-form-label required">宠物编号：</label>
        <div class="layui-input-inline">
            <input id="goodId" type="text" name="category" lay-verify="required" lay-reqtext="宠物编号岂能为空" placeholder="请输入宠物编号" value="" class="layui-input">
            <tip>填写要添加图片的宠物编号。</tip>
            <tip>注意：请添加三张图片，如果之前添加过图片，会将之前的图片覆盖。</tip>
        </div>
    </div>
</div>
<div class="layui-upload">
    <button type="button" class="layui-btn" id="test1">选择图片</button>
    <br>
    <button type="button" class="layui-btn" id="btn">上传图片</button>
    <div class="layui-upload-list">
        <img style="width: 400px;height: 400px" id="demo1">
    </div>
</div>


<script src="../../layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>


    layui.use(['upload','jquery'], function(){
        var $ = layui.jquery,
            upload = layui.upload,
            form =layui.form,
            layer = layui.layer;
        var goodId = document.getElementById("goodId").value;
        console.log(goodId);
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: '/uploadFile'
            ,multiple: true
            ,auto: false
            ,bindAction: "#btn"
            ,before: function(obj){
                    // layer.load(); //上传loading
                    this.data={'goodId':$("#goodId").val()};
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）

                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    layer.msg('上传失败');
                }
                //上传成功
                layer.msg('上传成功');
            }
        });
    });
</script>

</body>
</html>